<template>
  <router-view v-slot="{ Component }">
    <keep-alive :exclude="['warn_detail']">
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <van-tabbar v-model="active" v-if="showTabBar">
    <van-tabbar-item
      v-for="item in tabBarList"
      :key="item.path"
      :name="item.path"
      @click="router.push(item.path)"
    >
      <span>{{ item.title }}</span>
      <template #icon="props">
        <img :src="props.active ? item.iconHover : item.icon" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { RouterView, useRoute } from 'vue-router'
import { computed, ref, watch } from 'vue'
import home from '@/assets/images/home.png'
import homeHover from '@/assets/images/home_hover.png'
import report from '@/assets/images/report.png'
import reportHover from '@/assets/images/report_hover.png'
import my from '@/assets/images/my.png'
import myHover from '@/assets/images/my_hover.png'
import warn from '@/assets/images/warn.png'
import warnHover from '@/assets/images/warn_hover.png'
import router from './router'
const route = useRoute()
const showTabBar = computed(() => {
  return ['dashboard', 'my', 'report', 'warn'].includes(route.name)
})
const active: any = ref('my')
watch(
  () => route.name,
  (val) => {
    active.value = val
  },
  {
    immediate: true,
  },
)

const tabBarList = ref([
  {
    icon: home,
    iconHover: homeHover,
    title: '首页',
    path: 'dashboard',
  },
  {
    icon: report,
    iconHover: reportHover,
    title: '报告',
    path: 'report',
  },
  {
    icon: warn,
    iconHover: warnHover,
    title: '告警',
    path: 'warn',
  },
  {
    icon: my,
    iconHover: myHover,
    title: '我的',
    path: 'my',
  },
])
</script>

<style lang="scss" scoped>
:deep(.van-tabbar-item--active) {
  .van-tabbar-item__text {
    span {
      color: #25afca;
    }
  }
}
</style>
